<template>
    <div class="container">
        <div class="billing-header">
            <div class="header">
                <router-link tag="span" to="/mi">&lt;</router-link>
                <h3>按行程开票</h3>
                <p>开票规则</p>
            </div>
        </div>
        <div class="billing-main">
            <div class="tops">
                <p :class="{'con':flag}" @click="flag=true">待支付</p>
                <p :class="{'con':!flag}" @click="flag=false">已支付</p>
            </div>
            <div class="bottoms" :class="{'active':!flag}">
                <div class="content">
                    <img src="../assets/img/hhh.png" alt="">
                    <p>暂无待开票订单（只支持12个月内的订单）</p>

                </div>
                <div class="checked">
                    <div class="left">
                        <input type="checkbox">
                        <p>全选</p>
                    </div>

                    <button>申请开票</button>
                </div>

            </div>

            <div class="bottoms" :class="{'active':flag}">
                <div class="content">
                    <img src="../assets/img/hhh.png" alt="">
                    <p>暂无待开票订单</p>

                </div>
                

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            flag:true,
        }
    }
}
</script>

<style lang="scss" scoped>
.billing-header {
    width: 100%;

    .header {
        width: 90%;
        height: 55px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            float: left;
            font-size: 20px;
            font-weight: 800;
            font-family: "仿宋";
        }

        h3 {
            text-align: center;
            font-weight: 400;
            margin-left: 20px;
        }
    }
}

.billing-main {
    width: 100%;

    .tops {
        display: flex;
        justify-content: space-evenly;

        p {
            position: relative;

        }

        .con {
            color: #30d19c;
            font-weight: 600;
        }

        .con::after {
            content: "";
            display: block;
            height: 3px;
            width: 25px;
            background: linear-gradient(270deg, #ffd100, rgba(255, 209, 0, 0));
            position: absolute;
            bottom: -8px;
            left: 10px;

        }
    }

    .bottoms {

        margin-top: 10px;


        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 215px 0;

            img {
                width: 70px;
                height: 70px;
            }

            p {
                font-size: 12px;
            }

        }

        .active {
            display: none;
        }

        .checked {
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;


                p{
                    font-weight: 600;
                    margin-left: 5px;
                }
            }
            button{
                width: 138px;
                height: 55px;
                background-color: #b3ebcb;
                text-align: center;
                line-height: 55px;
                font-size: 14px;
                border: none;
                color: #fff;
                border-radius: 5px;
            }

        }

    }
    .active{
        display: none;
    }

}
</style>